<template>
	<div>
		<div>
			<div>
				<ul class="aside-nav">
					<li v-for="item in items" :key="item.id">
						<div class="link-item" style="cursor: pointer;">
							{{item.name}}
						</div>
						<ul class="sub-nav">
							<li v-for="(child,index) in item.children" :class="{active:isActive == index}" :title="child.name" :key="child.id">
								<router-link :to="child.url" class="link-item router" @click.native="navClick(index)">
									<span>{{child.name}}</span>
								</router-link>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: "AsideNav",
  props: {
    items: Array
  },
  data: function() {
    return {
      isActive: 0
    };
  },
  methods: {
    navClick: function(index) {
      this.isActive = index;
    }
  }
};
</script>
